<template>
 	<a-row>
 		<a-form :layout="formLayout"  :form="form"  @submit="handleSubmit">
 			<a-form-item   
		        label="客户类型"
		        :label-col="formItemLayout.labelCol"
		        :wrapper-col="formItemLayout.wrapperCol"
		      >
		        <a-select defaultValue=""  @change="handleChange">
			      <a-select-option value="">所有</a-select-option>
			      <a-select-option value="1">供应商</a-select-option>
			      <a-select-option value="2">买方</a-select-option>
			      <a-select-option value="3" >供应商和买方</a-select-option>
			      <a-select-option value="4">代理方</a-select-option>
			      <a-select-option value="0">待确认</a-select-option>
			    </a-select>

		    </a-form-item>
		    <a-form-item
		        label="客户名称"
		        :label-col="formItemLayout.labelCol"
		        :wrapper-col="formItemLayout.wrapperCol"
		      >
		        <a-select
		        	v-decorator="['entCode',baseform.entCode]"
					placeholder="输入搜索..."
					:showSearch='true'
					:showArrow="false"
					:filterOption="false"
					@search="searchBuyer"
					@change="changeBuyer"
					:notFoundContent="fetching ? undefined : '暂无数据，尝试输入关键字'"
					@popupScroll='popupScroll($event)'

				>
					<a-spin v-if="fetching" slot="notFoundContent" size="small"/>
					<a-select-option v-for="d in data_sup" :key="d.code"  v-else>{{d.name}}</a-select-option>
				</a-select>
		    </a-form-item> 
		    <a-row  >
			      <a-col  :xxl='{span:9,offset:6}'  :xl='{span:12,offset:6}'  :lg='{span:16,offset:5}'  :md='{span:19,offset:2}'  :xs='{span:24}'>
				      <a-divider orientation="left">联系记录添加</a-divider>
				  </a-col>
			</a-row>
		    <a-form-item label='日期' 
		        :label-col="formItemLayout.labelCol"
		        :wrapper-col="formItemLayout.wrapperCol" >
		          	<a-date-picker       v-decorator="['clientDate',baseform.date]"/>
		    </a-form-item>
		    <a-form-item label='联系人' 
		        :label-col="formItemLayout.labelCol"
		        :wrapper-col="formItemLayout.wrapperCol" >
		          	<a-input placeholder="请输入"  v-decorator="['contact',baseform.contact]"/>
		    </a-form-item>
		    <a-form-item label='联系电话'
		        :label-col="formItemLayout.labelCol"
		        :wrapper-col="formItemLayout.wrapperCol" >
		            <a-input placeholder="请输入"  v-decorator="['phone']"/>
		    </a-form-item>
		    <a-form-item label='备注'  
		        :label-col="formItemLayout.labelCol"
		        :wrapper-col="formItemLayout.wrapperCol">
		            <a-textarea type='textarea'  :rows='5'   v-decorator="['remark',baseform.remark]"/>
		    </a-form-item>
			    
		    <a-form-item
		        :wrapper-col="buttonItemLayout.wrapperCol"
		      >
		        <a-button type="primary"  html-type="submit"  class='mr20'>
		          <span  >添加</span>
		        </a-button>
		        <router-link to='/customer'><a-button > 取消 </a-button></router-link>
		    </a-form-item>
    	</a-form>
    	
 	</a-row>
</template>

<script>

import  { submitContact,DetailEnt,customerList,ContactList }  from  '@/api/customer/index'

export default {
  name: 'contactAdd',
  data () {
    return {
    	/*form  布局*/
      	formLayout:'horizontal',
      	baseform:{
      		entCode: {rules: [{ required: true, message: '请选择客户' },{ whitespace : true ,message:'当前输入不能为空'}]},
      		date:{ rules : [ { required:true,message:'请选择日期' } ] },
      		contact:{ rules : [ { required:true,message:'请输入联系人'}] },
        	remark:{ rules : [ { required:true,message:'请输入' },{ whitespace : true ,message:'当前输入不能为空'} ] },
      	},
      	
      	/*请求选择的企业列表  参数*/
      	search:{
      		supOrBuyer:'',
      		keyWord:'',
      		pageNo:1,
      		pageSize:10,
      	},
		data_sup:[],/*搜索客户选择列表*/
		data_sup_total:0,
		fetching:false,
		requestInit:true,/*值变化时 初始值设置，用于请求搜索重置 **********/

    }
  },
  beforeCreate () {
    	this.form = this.$form.createForm(this);
  },
  created(){

  },
  methods:{
  		/*提交表单*/
  		handleSubmit (e) {
			e.preventDefault();
			let that = this , 
				url = '/op/client_history/create_client_history' 
			this.form.validateFields((err, values) => {
				if (!err) {
				  submitContact(url,values).then((res)=>{
				  		if(res.data.flag == true){
				  			this.$message.success(res.data.msg)
				  			this.$router.push('/contact')
				  		}
				  		else{
				  			this.$message.error(res.data.msg)
				  		}
				  })
				}
				else{
					console.log(err)
				}
			});
		},

		/*组件基础函数*/
		//客户类型下拉选择变化
		handleChange(value) {
	        this.search.supOrBuyer = value

	        this.requestInit=true
	        this.search.pageNo = 0
	        this.data_sup = []
	        this.form.setFieldsValue({'entCode':''})
	        this.search.keyWord = ''
	    },
	    //输入input改变 请求企业列表关键词改变
	    searchBuyer(value) {
	    	// console.log(value == this.search.keyWord)
	    	/**不用特设值等于多少，值变化时设置*/
	    	if(value != this.search.keyWord){
	    		this.requestInit = true
	    		this.search.pageNo = 1
	    		this.data_sup  =[]
	    	}
	    	/*设定搜索值*/
	        this.search.keyWord = value
	        /*loading*/
	        this.fetching = this.requestInit == true? true : false;//因为这个占用v-if  导致数据重新渲染，所以会一直跳到scrollTop为0
	    	// console.log(this.search)

	        customerList(this.search)
	          .then(body => {
	          	this.data_sup_total = body.data.totalRs
	          	if(this.data_sup.length<this.data_sup_total){
	          			// this.data_sup = this.data_sup.concat(
			          	// 	body.data.dataList.map(item=>({
			          	// 	code:item.code,
			          	// 	name:item.name
			          	// })))
			          	body.data.dataList.forEach((item)=>{
			          		this.data_sup.push({code:item.code,name:item.name})
			          	})
	          	}
	            this.fetching =  false;
	          });
	      },
	      popupScroll(e){
	      	// console.log(e.target.scrollTop,e.target.offsetHeight,e.target.scrollHeight)
	      	//如果已经全部请求完毕， 就不再调用这个函数
	      	if(this.data_sup_total == this.data_sup.length){
	      		return false
	      	}
	      	if(e.target.scrollTop + e.target.offsetHeight == e.target.scrollHeight){
	      		this.search.pageNo +=1
	      		this.requestInit = false
	      		this.searchBuyer(this.search.keyWord)
	      	}
	      },
	    changeBuyer (value) {
	       
	    },
  },
  
  computed: {
    formItemLayout () {
      const { formLayout } = this;
      return formLayout === 'horizontal' ? {
        labelCol: {md:{span:5},lg:{ span: 7 }},  //label 标签布局
        wrapperCol: {xxl:{ span: 8 },xl:{ span : 11},lg:{ span :14 },md:{ span : 16 },xs:{ span :24}}, //需要为输入控件设置布局样式时，使用该属性，用法同 labelCol
      } : {};
    },
    buttonItemLayout () {
      const { formLayout } = this;
      return formLayout === 'horizontal' ? {
        wrapperCol: { span: 14, offset: 7 },
      } : {};
    },
  },
  watch:{
  	
  },
  components:{
  	
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	/*客户维护记录*/
.tipdiv{margin-left: 100px;margin-top: -20px;}
</style>
